<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link type="text/css" rel="Stylesheet" href="./reset-min.css" />
<link type="text/css" rel="Stylesheet" href="./style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
<script type="text/javascript" src="js/class/circle.js"></script>
<script type="text/javascript" src="js/class/enemy.js"></script>
<script type="text/javascript" src="js/class/main_tower.js"></script>
<script type="text/javascript" src="js/class/defense_tower.js"></script>
<script type="text/javascript" src="js/class/engine.js"></script>
<script src="js/utils/jquery.ui.core.js"></script>
<script src="js/utils/jquery.ui.widget.js"></script>
<script src="js/utils/jquery.ui.mouse.js"></script>
<script src="js/utils/jquery.ui.draggable.js"></script>
<script type="text/javascript">

  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();

  function initialize() {
    engine = new Engine();
    engine.init();
  }
  
  $(function(){
		$("#backMenu").live("click",function(){window.location = "home.html";});
		$("#back").live("click",function(){window.location = "home.html";});
		$("#pause").click(function(){alert("Click OK to resume the current game.");});
		$("#jogo").click(function(){
			window.location = "jogo.html";
		});
		$("#menu").draggable();
	});
	$("a.level").live("click",function(){
		var index=$(this).attr("index");
		$("#intro").fadeOut(function(){startGame(index);});
	});

</script>

</head>
<body onload="initialize()">
	<div unselectable="on" class="unselectable" id="header">Hypermedia/Hypermedia project 2011: Monsters TD</div>
	<div id="gameOver" style="display:none">
		<a id="backMenu" class="butt" style="z-index:9999">Menu</a>
	</div>
	<div id="intro">
		<div id="logo"></div>
		<div id="menu">
			<div id="levelContainer">
				<div id="select_level" unselectable="on" class="unselectable">
					<h2 class="txt">Selecione a fase</h2>
				</div>
			</div>
			<a id="backMenu" class="butt">Menu</a>
		</div>
	</div>
	<div class="notification" style="display:none;z-index:9999">You don't have enough money!</div>
	<div unselectable="on" class="unselectable" id="footer">Designed by: Carla Guillen Gomes, Renan Mendes, Fernando Picelli Vicentim, Arthur Rayer</div>
	<div id="game"  unselectable="on" class="unselectable" style="display:none;z-index:9999">
		<div id="monitor">
			<span style="margin-right: 50px"><img src='img/money.png'/><a id="money"></a></span>
			<span><img src='img/life.png'/><a id="mainTowerLife"></a></span>
		</div>
		<div id="panel">
			<span><a id="back" class="butt">Menu</a></span>
			<span><a id="pause" class="butt">Pause</a></span>
		</div>
		<div id="map_canvas" style="width:100%; height:100%"></div>
	</div>
</body>

</html>

